<template>

    <el-form ref="form" :model="form" :rules="$rules.carForm" label-width="120px" style="margin:20px;width:80%;min-width:600px;" v-loading="loading">

    <el-collapse v-model="activeNames">

      <el-collapse-item name="a1">
        <template slot="title">车辆信息</template>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车辆编号:"  >
              <label>{{form.id}}</label>
            </el-form-item>
          </el-col>
          <!--<el-col :span="12">-->
            <!--<el-form-item label="客户手机号:"  >-->
              <!--<label>{{form.mobile}}</label>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户名:"  >
              <label>{{form.nickName}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户手机号:"  >
              <label>{{form.mobile}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车主:"  >
              <label>{{form.sellerName}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车主电话:"  >
              <label>{{form.sellerMobile}}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="车型:"  >
              <label>{{form.typeName}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="品牌:"  >
            <label>{{form.pBrandName}}-{{form.brandName}}</label>
          </el-form-item>
        </el-col>
          <el-col :span="6">
            <el-form-item label="颜色:"  >
              <label>{{form.color}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="价格:"  >
              <label>{{form.sellPrice}}</label>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="排放标准:"  >
              <label>{{form.outStandard}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最大马力:"  >
              <label>{{form.enginePower}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="箱体长度:"  >
              <label>{{form.boxLength}}</label>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="看车地点:"  >
              <label>{{form.address}}</label>
            </el-form-item>
          </el-col>
        </el-row>

      </el-collapse-item>

      <el-collapse-item name="a2">
        <template slot="title">访问记录</template>
        <el-row>
          <el-col :span="24">
            <el-form-item >
              <p v-for="(vo,index) in list">
                {{index+1}}. {{vo.time}} {{vo.userName}}({{vo.userMobile}}) 访问了该车辆
              </p>
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>

    </el-collapse>

  </el-form>

</template>

<script>
    import axios from "axios";
    export default {
        name:'VisitorList',
        data() {
            return {
                loading:false,
                activeNames:['a0','a1','a2','a3','a4'],
                form: {
                    reason:'',
                    status:'2',
                    takeRecord:'0',
                    isTransfer:'0',
                    truckId:0,
                    typeId:null,
                    sellerName:'',
                    sellerMobile:'',
                    provinceId:null,
                    cityId:null,
                    address:'',
                    imgs:new Array(21),
                    parentBrand:null,
                    brandId:null,
                    buyDate:null,
                    outStandard:null,
                    enginePower:null,
                    boxLength:0,
                    sellPrice:0,
                    driverType:null,
                    fuelType:1,
                    mileage:0,
                    color:'',
                    engineId:null,
                    userId:null
                },
                list:[]
            }
        },
        methods: {

        },
        mounted(){   },

        created(){
            let params = this.$route.params;
            this.form.truckId = params.truckId;
            let apiQuery = this.$api;
            let that = this;
            this.loading=true;
            apiQuery.getTruckInfo(params).then(response=>{
                let result = response.data;
                let d = result.data
                if(result.code==0){
                    that.form = d;
                    if(d.driverType){
                        that.form.driverType = parseInt(d.driverType);
                    }
                    that.form.engineId  = d.engineId;
                    if(d.fuelType){
                        that.form.fuelType = parseInt(d.fuelType);
                    }
                    if(d.isTransfer){
                        that.form.isTransfer = d.isTransfer+"";
                    }
                    if(d.takeRecord){
                        that.form.takeRecord = d.takeRecord+"";
                    }
                    that.form.reason = d.reason;
                    if(d.status){
                        that.form.status = d.status+"";
                    }
                }else{
                    that.$message.error(result.msg);
                }
                that.loading=false;
            });

            apiQuery.visitorList(params).then(response=>{
                let result = response.data;
                if(result.code==0){
                    that.list = result.data
                }else{
                    that.$message.error(result.msg);
                }
                that.loading=false;
            });
        }
    }
</script>
<style lang="less">
  .hiddenUpload .el-upload--picture-card  {
    display: none;
  }
  .el-upload--picture-card{
    width: 100px;
    height:100px;
    line-height:100px;
  }
  .w450{
    width:350px;
    display:inline-block;
  }
  .img-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 178px;
    height: 178px;
    overflow: hidden;
  }
  .img-uploader .img-upload:hover {
    border-color: #409EFF;
  }
  .img-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .outimg {
    width: 178px;
    height: 178px;
    display: block;
    border: 1px dashed #d9d9d9;
    background-position:center;
    background-size:cover;
    -webkit-background-size:cover;
  }
  .el-collapse-item__header{
    color:#04adfc;
    border-left: 5px solid #04adfc;
    padding-left: 18px;
    font-weight: bold;
  }
  .truckTypes{
    margin: 5px 5px 5px 5px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  .el-upload-list--picture-card .el-upload-list__item{
    width: 100px!important;
    height: 100px!important;
    line-height: 100px!important;
  }
  .el-upload-list__item .el-icon-close{
    display:block;
    color: red;
  }
  .el-upload-list {
    width: 100px;
  }
  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }
      .highlighted .addr {
        color: #ddd;
      }
    }
  }
  .el-autocomplete{
    width: 450px;
  }

</style>
